<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <image src="../../static/icon-address.png" class="search-icon"></image>
        <input type="text" v-model="searchKeyword" @confirm="handleSearch" placeholder="搜索加油站"></input>
      </view>
      <view class="actions">
        <view class="refresh-btn" @click="refreshLocation">
          <image src="../../static/icon-refresh.png" class="refresh-icon"></image>
        </view>
        <view class="list-mode-btn" @click="switchToListMode">
          <text>列表模式</text>
        </view>
      </view>
    </view>

    <!-- 地图区域 -->
    <view class="map-container">
      <!-- 添加定位状态提示 -->
      <view class="location-status" v-if="locationStatus !== ''">
        {{ locationStatus }}
      </view>
      <!-- 使用真实地图组件 -->
      <map 
        id="map" 
        :latitude="latitude" 
        :longitude="longitude" 
        :markers="markers" 
        :show-location="true" 
        style="width: 100%; height: 500px;" 
        @markertap="handleMarkerTap"
        @tap="handleMapClick"
      ></map>
    </view>

    <!-- 加油站详情卡片 -->
    <view class="station-card">
      <view class="card-header">
        <image :src="stationData.imageUrl || '../../static/icon-car.png'" class="station-image"></image>
        <view class="detail-btn" @click="viewStationDetail">
          <text class="detail-text">详情</text>
          <image src="../../static/icon-right.png" class="detail-icon"></image>
        </view>
      </view>
      <view class="station-info">
        <view class="station-header">
          <text class="station-title">{{ stationData.name }}</text>
          <text class="station-distance">{{ stationData.distance }}</text>
        </view>
        <text class="station-location">{{ stationData.address }}</text>
        <view class="station-meta">
          <view class="meta-item">
            <text class="meta-label">营业时间：</text>
            <text class="meta-value">{{ stationData.openTime }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">联系电话：</text>
            <text class="meta-value">{{ stationData.phone }}</text>
          </view>
        </view>
        <!-- <view class="station-actions">
          <view class="detail-link" @click="viewStationDetail">
            <text>详情</text>
            <image src="../../static/icon-right.png" class="right-icon"></image>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 导航按钮 -->
    <view class="navigate-section">
      <button class="navigate-btn" @click="handleNavigate">立即导航</button>
    </view>

    <!-- 搜索结果面板 - 使用相对定位样式 -->
    <view class="search-result-panel" v-if="searchResultVisible">
      <view class="search-result-header">
        <text class="search-result-title">搜索结果 ({{ searchResults.length }})</text>
        <view class="search-result-close" @click="closeSearchResult">
          <text>×</text>
        </view>
      </view>
      <view class="search-result-content">
        <view class="search-loading" v-if="searchLoading">
          <text>正在搜索中...</text>
        </view>
        <view v-else-if="searchResults.length === 0" class="search-result-empty">
          <text>没有找到相关加油站</text>
        </view>
        <view class="search-result-list" v-else>
          <view 
            class="search-result-item" 
            v-for="station in searchResults" 
            :key="station.id"
            @click="handleSearchResultClick(station)"
          >
            <view class="station-info-content">
              <view class="station-name-distance">
                <text class="station-name-text">{{ station.name }}</text>
                <text class="station-distance-text">{{ station.distance }}</text>
              </view>
              <text class="station-address-text">{{ station.address }}</text>
              <view class="station-extra-info">
                <text class="station-open-time">{{ station.openTime }}</text>
                <text class="station-phone">{{ station.phone }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 地图详情页面逻辑
import { ref, onMounted } from 'vue';
// 初始化QQMapWX实例的函数 - 使用本地SDK
const initQQMapSDK = (key) => {
  try {
    console.log('初始化地图SDK，使用本地qqmap-wx-jssdk.min.js');
    
    // 首先尝试获取全局注入的QQMapWX（已在main.ts中导入并挂载）
    let QQMapWXClass = null;
    
    // 尝试多种方式获取QQMapWX类
    try {
      // 1. 从globalThis获取
      if (typeof globalThis.QQMapWX !== 'undefined') {
        QQMapWXClass = globalThis.QQMapWX;
        console.log('✓ 成功获取全局QQMapWX类');
      }
      // 2. 从window获取（浏览器环境）
      else if (typeof window !== 'undefined' && window.QQMapWX) {
        QQMapWXClass = window.QQMapWX;
        console.log('✓ 从window获取QQMapWX类');
      }
      // 3. 尝试动态导入
      else {
        console.log('尝试动态导入QQMapWX');
        QQMapWXClass = require('../../static/js/qqmap-wx-jssdk.min.js');
        console.log('✓ 动态导入QQMapWX成功');
      }
    } catch (importError) {
      console.warn('获取QQMapWX类失败:', importError.message || String(importError));
    }
    
    // 如果成功获取到类，创建实例
    if (QQMapWXClass) {
      try {
        const sdkInstance = new QQMapWXClass({ key });
        console.log('地图SDK实例创建成功');
        return sdkInstance;
      } catch (initError) {
        console.error('创建SDK实例失败:', initError);
      }
    }
    
    // 降级方案：使用WebService API兼容模式
    console.log('启用WebService API兼容模式');
    return new class {
      constructor(options) {
        this.key = options.key || 'GSHBZ-JKCRX-B374Q-TF22Q-M4S5J-RWBBN';
        console.log('初始化WebService API兼容模式，密钥:', this.key);
      }
      
      reverseGeocoder(options) {
        const { location, success, fail } = options;
        if (!location) {
          fail && fail({ status: -1, message: '位置参数不能为空' });
          return;
        }
        
        try {
          uni.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/',
            method: 'GET',
            data: { location, key: this.key },
            success: (res) => {
              if (res.statusCode === 200 && res.data) {
                if (res.data.status === 0 && success) {
                  success(res.data);
                } else if (fail) {
                  fail(res.data);
                }
              }
            },
            fail: (error) => {
              console.error('反向地理编码请求失败:', error);
              fail && fail({ status: -1, message: '网络请求失败', error });
            }
          });
        } catch (e) {
          console.error('反向地理编码处理失败:', e);
          fail && fail({ status: -1, message: '处理失败', error: e });
        }
      }
      
      search(options) {
        const { keyword, location, radius = 5000, page_size = 20, success, fail } = options;
        
        if (!keyword || !location) {
          fail && fail({ status: -1, message: '关键词或位置参数不能为空' });
          return;
        }
        
        try {
          uni.request({
            url: 'https://apis.map.qq.com/ws/place/v1/search',
            method: 'GET',
            data: {
              keyword: encodeURIComponent(keyword),
              location,
              radius,
              page_size,
              key: this.key
            },
            success: (res) => {
              if (res.statusCode === 200 && res.data) {
                if (res.data.status === 0 && success) {
                  success(res.data);
                } else if (fail) {
                  fail(res.data);
                }
              }
            },
            fail: (error) => {
              console.error('POI搜索请求失败:', error);
              fail && fail({ status: -1, message: '网络请求失败', error });
            }
          });
        } catch (e) {
          console.error('POI搜索处理失败:', e);
          fail && fail({ status: -1, message: '处理失败', error: e });
        }
      }
    }({ key });
  } catch (error) {
    console.error('初始化地图SDK失败:', error);
    // 返回基本的mock对象确保应用不会崩溃
    return {
      search: (options) => options.fail && options.fail({ status: -1, message: '地图服务不可用' }),
      reverseGeocoder: (options) => options.fail && options.fail({ status: -1, message: '地图服务不可用' })
    };
  }
}

// 响应式数据
const searchKeyword = ref('');
const latitude = ref(35.2655); // 默认纬度（郑州高新区）
const longitude = ref(113.6229); // 默认经度（郑州高新区）
const markers = ref([]); // 地图标记
const nearbyStations = ref([]); // 附近加油站数据
const hasMapImage = ref(false); // 是否有地图图片
const locationDesc = ref(''); // 位置描述
const locationStatus = ref('正在获取位置...'); // 定位状态提示
const searchResults = ref([]); // 搜索结果
const searchLoading = ref(false); // 搜索加载状态
const searchResultVisible = ref(false); // 搜索结果面板可见状态

// 地图上下文和SDK实例
let mapContext = null;
let qqmapsdk = null;

// 腾讯地图API密钥
const QQMAP_KEY = 'IP6BZ-VFXHT-SJIXQ-LOD5I-FUOXF-J7BPV';

// 加油站数据对象
const stationData = ref({
  id: '1',
  name: '中国石油加油站',
  address: '山阳区人民路32号',
  latitude: 35.2400,
  longitude: 113.3900,
  imageUrl: '../../static/icon-car.png',
  distance: '0.8km',
  openTime: '24小时营业',
  phone: '0391-1234567'
});

// 获取位置信息
const getLocation = async (showToast = false) => {
  locationStatus.value = '正在获取位置...';
  
  try {
    // 尝试从缓存获取位置
    const cachedLocation = uni.getStorageSync('userLocation');
    if (cachedLocation && (Date.now() - cachedLocation.timestamp < 300000)) { // 5分钟内有效
      latitude.value = cachedLocation.latitude;
      longitude.value = cachedLocation.longitude;
      locationDesc.value = cachedLocation.address;
      locationStatus.value = `已获取位置：${cachedLocation.address}`;
      await loadNearbyStations();
      return;
    }
    
    // 使用uni.getLocation获取位置
    uni.getLocation({
      type: 'gcj02',
      altitude: true,
      geocode: true,
      success: async (res) => {
        try {
          console.log('定位成功，获取到位置信息');
          
          // 显示详细的位置信息
          const addressInfo = res.address || {};
          const addressDescription = addressInfo.city ? `${addressInfo.city}${addressInfo.district || ''}${addressInfo.street || ''}${addressInfo.streetNumber || ''}` : '未知位置';
          
          // 更新地图中心坐标
          latitude.value = res.latitude;
          longitude.value = res.longitude;
          
          // 更新位置描述
          locationDesc.value = addressDescription;
          
          // 存储用户位置信息
          uni.setStorageSync('userLocation', {
            latitude: res.latitude,
            longitude: res.longitude,
            address: addressDescription,
            timestamp: new Date().getTime()
          });
          
          // 异步加载附近加油站数据并更新地图
          await loadNearbyStations();
          
          locationStatus.value = `定位成功：${addressDescription}`;
          
          if (showToast) {
            uni.showToast({ title: '定位成功', icon: 'success' });
          }
          
        } catch (error) {
          console.error('处理位置信息失败:', error.message || error.errMsg || String(error));
          locationStatus.value = '定位成功但加载附近加油站失败';
        } finally {
          // 延迟隐藏状态提示
          setTimeout(() => {
            locationStatus.value = '';
          }, 3000);
        }
      },
      fail: async (err) => {
        console.error('定位失败:', err.message || err.errMsg || String(err));
        
        // 尝试使用备用定位方式
        try {
          uni.getLocation({
            type: 'wgs84',
            altitude: true,
            success: async (fallbackRes) => {
              try {
                console.log('备用定位成功');
                
                // 更新地图中心坐标
                latitude.value = fallbackRes.latitude;
                longitude.value = fallbackRes.longitude;
                
                // 异步加载附近加油站数据并更新地图
                await loadNearbyStations();
                
                locationStatus.value = '使用备用定位成功';
                
                if (showToast) {
                  uni.showToast({ title: '定位成功', icon: 'success' });
                }
              } catch (error) {
                console.error('备用定位后处理失败:', error.message || error.errMsg || String(error));
                locationStatus.value = '备用定位成功但加载加油站失败';
              } finally {
                setTimeout(() => {
                  locationStatus.value = '';
                }, 3000);
              }
            },
            fail: (fallbackErr) => {
              console.error('备用定位也失败:', fallbackErr.message || fallbackErr.errMsg || String(fallbackErr));
              
              // 降级策略：使用默认位置
              latitude.value = 35.2655; // 郑州高新区默认纬度
              longitude.value = 113.6229; // 郑州高新区默认经度
              
              // 加载模拟加油站数据
              generateEnhancedMockStations(latitude.value, longitude.value).then(stations => {
                updateMapMarkers(latitude.value, longitude.value, stations);
              });
              
              locationStatus.value = '定位失败，使用高新区默认位置';
              
              // 权限被拒绝的处理
              if (err.errMsg && (err.errMsg.includes('auth deny') || err.errMsg.includes('auth denied'))) {
                uni.showModal({
                  title: '位置权限',
                  content: '需要您的位置权限才能显示实时位置，请前往设置开启',
                  confirmText: '去设置',
                  cancelText: '取消',
                  success: (modalRes) => {
                    if (modalRes.confirm && uni.openSetting) {
                      uni.openSetting();
                    }
                  }
                });
              }
              
              setTimeout(() => {
                locationStatus.value = '';
              }, 3000);
            }
          });
        } catch (e) {
          console.error('定位处理异常:', e.message || e.errMsg || String(e));
          locationStatus.value = '定位服务异常';
          setTimeout(() => {
            locationStatus.value = '';
          }, 3000);
        }
      }
    });
  } catch (error) {
    console.error('获取位置异常:', error);
    locationStatus.value = '获取位置异常';
    setTimeout(() => {
      locationStatus.value = '';
    }, 3000);
  }
};

// 刷新定位功能
const refreshLocation = () => {
  console.log('刷新定位...');
  // 清除缓存的位置信息
  uni.removeStorageSync('userLocation');
  // 获取新位置
  getLocation(true);
};

// 加载附近加油站数据
const loadNearbyStations = async () => {
  try {
    // 确保SDK已初始化
    if (qqmapsdk) {
      console.log('开始获取真实加油站数据...');
      
      // 创建Promise包装搜索请求
      const searchPromise = new Promise((resolve, reject) => {
        qqmapsdk.search({
          keyword: '加油站',
          location: `${latitude.value},${longitude.value}`,
          radius: 5000, // 搜索半径5公里
          page_size: 20,
          success: (res) => {
            console.log('POI搜索成功，获取到真实加油站数据:', res);
            resolve(res.data);
          },
          fail: (err) => {
            console.error('POI搜索失败:', err);
            reject(err);
          }
        });
      });
      
      // 等待搜索结果
      const searchResult = await searchPromise;
      
      // 检查是否有POI数据
      if (searchResult && searchResult.length > 0) {
        // 转换数据格式，确保字段完整性
        const stations = searchResult.map((poi, index) => ({
          id: `station_${index}_${Date.now()}`,
          name: poi.title || '未知加油站',
          address: poi.address || '暂无地址信息',
          latitude: poi.location?.lat || latitude.value,
          longitude: poi.location?.lng || longitude.value,
          distance: poi.location ? calculateDistance(latitude.value, longitude.value, poi.location.lat, poi.location.lng) : '未知距离',
          // 以下信息可以是虚拟的
          openTime: '24小时营业',
          phone: '0391-1234567'
        }));
        
        // 更新加油站数据和地图标记
        nearbyStations.value = stations;
        updateMapMarkers(latitude.value, longitude.value, stations);
        console.log(`成功加载${stations.length}个真实加油站数据`);
      } else {
        console.warn('未找到附近加油站');
        // 未找到数据时显示提示
        nearbyStations.value = [];
      }
    } else {
      console.error('腾讯地图SDK未初始化，无法获取真实加油站数据');
    }
  } catch (error) {
    console.error('加载附近加油站失败:', error);
    // 保留空数组，避免显示模拟数据
    nearbyStations.value = [];
    
    // 可以添加用户提示
    uni.showToast({
      title: '获取加油站信息失败，请稍后重试',
      icon: 'none',
      duration: 2000
    });
  }
};

// 已移除模拟加油站数据生成函数，现在使用真实API获取加油站数据


// 计算两点之间的距离（公里）
const calculateDistance = (lat1, lng1, lat2, lng2) => {
  const R = 6371; // 地球半径（公里）
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLng = (lng2 - lng1) * Math.PI / 180;
  const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLng/2) * Math.sin(dLng/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  const distance = R * c;
  return distance < 1 ? (distance * 1000).toFixed(0) + 'm' : distance.toFixed(1) + 'km';
};

// 更新地图标记
const updateMapMarkers = (lat, lng, stations) => {
  if (!lat || !lng) return;
  
  // 当前位置标记
  const currentMarker = {
    id: 0,
    latitude: lat,
    longitude: lng,
    width: 36,
    height: 36,
    iconPath: '../../static/icon-Myaddress.png',
    title: '我的位置',
    zIndex: 999
  };
  
  // 生成加油站标记
  const stationMarkers = stations.map((station, index) => ({
    id: index + 1,
    latitude: station.latitude,
    longitude: station.longitude,
    width: 32,
    height: 32,
    iconPath: '../../static/icon-Mapaddress.png',
    title: station.name,
    callout: {
      content: station.name,
      display: 'BYCLICK',
      padding: 10,
      borderRadius: 5,
      bgColor: '#fff',
      color: '#333'
    },
    zIndex: 100 + index,
    stationData: station
  }));
  
  // 合并所有标记
  markers.value = [currentMarker, ...stationMarkers];
  console.log('地图标记已更新:', markers.value.length, '个标记');
  
  // 调整地图视角
  setTimeout(() => {
    if (mapContext && markers.value.length > 0) {
      const points = markers.value.map(m => ({ latitude: m.latitude, longitude: m.longitude }));
      mapContext.includePoints({
        points: points,
        padding: [100, 100, 100, 100]
      });
    }
  }, 500);
};

// 处理地图点击事件
const handleMapClick = (e) => {
  console.log('地图点击事件:', e);
};

// 处理标记点击事件
const handleMarkerTap = (e) => {
  console.log('标记点击事件:', e);
  const markerId = e.markerId;
  
  // 查找对应的加油站数据
  const marker = markers.value.find(m => m.id === markerId);
  if (marker && marker.stationData) {
    stationData.value = {
      ...marker.stationData,
      imageUrl: '../../static/icon-car.png'
    };
    uni.showToast({ title: `已选择${marker.stationData.name}`, icon: 'success' });
  }
};

// 处理搜索
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
    return;
  }
  
  searchLoading.value = true;
  searchResultVisible.value = true;
  
  // 使用腾讯地图SDK进行搜索
  if (qqmapsdk) {
    qqmapsdk.search({
      keyword: searchKeyword.value,
      location: `${latitude.value},${longitude.value}`,
      radius: 10000,
      page_size: 20,
      success: (res) => {
        console.log('搜索成功:', res);
        // 转换搜索结果
        searchResults.value = res.data.map((poi, index) => ({
          id: `search_${index}`,
          name: poi.title,
          address: poi.address,
          latitude: poi.location.lat,
          longitude: poi.location.lng,
          distance: calculateDistance(latitude.value, longitude.value, poi.location.lat, poi.location.lng),
          openTime: '24小时营业',
          phone: '0391-1234567'
        }));
      },
      fail: (err) => {
        console.error('搜索失败:', err);
        searchResults.value = [];
        uni.showToast({ title: '搜索失败，请重试', icon: 'none' });
      },
      complete: () => {
        searchLoading.value = false;
      }
    });
  } else {
    // SDK未初始化，使用模拟搜索结果
    setTimeout(() => {
      searchResults.value = nearbyStations.value.filter(station => 
        station.name.includes(searchKeyword.value) || station.address.includes(searchKeyword.value)
      );
      searchLoading.value = false;
    }, 1000);
  }
};

// 处理搜索结果点击
const handleSearchResultClick = (station) => {
  console.log('选择搜索结果:', station.name);
  stationData.value = {
    ...station,
    imageUrl: '../../static/icon-car.png'
  };
  
  // 更新地图视图到选中的加油站
  latitude.value = station.latitude;
  longitude.value = station.longitude;
  
  searchResultVisible.value = false;
};

// 关闭搜索结果面板
const closeSearchResult = () => {
  searchResultVisible.value = false;
};

// 切换到列表模式
const switchToListMode = () => {
  uni.showToast({ title: '列表模式功能开发中', icon: 'none' });
};

// 查看加油站详情
const viewStationDetail = () => {
  if (!stationData.value || !stationData.value.name) {
    uni.showToast({ title: '请先选择一个加油站', icon: 'none' });
    return;
  }
  
  // 导航到加油站详情页面，并传递数据
  uni.navigateTo({
    url: '/pages/detailMap/stationDetail',
    success: function(res) {
      // 通过事件通道向后端页面发送数据
      res.eventChannel.emit('stationData', {
        ...stationData.value,
        // 添加默认图片和虚拟的油价数据
        imageUrl: stationData.value.imageUrl || '../../static/icon-car.png',
        oilPrices: {
          '92#': '¥5.85/L',
          '95#': '¥6.25/L',
          '98#': '¥7.05/L',
          '0#': '¥5.55/L'
        }
      });
    }
  });
};

// 处理导航
const handleNavigate = () => {
  // 使用腾讯地图导航
  uni.openLocation({
    latitude: stationData.value.latitude,
    longitude: stationData.value.longitude,
    name: stationData.value.name,
    address: stationData.value.address,
    scale: 18
  });
};

// 初始化腾讯地图SDK
const initQQMap = () => {
  console.log('初始化腾讯地图服务...');
  
  try {
    qqmapsdk = initQQMapSDK(QQMAP_KEY); // 使用新的初始化函数
    console.log('腾讯地图SDK初始化成功');
  } catch (error) {
    console.error('初始化地图SDK失败:', error);
    // 创建一个基本的mock对象确保应用不会崩溃
    qqmapsdk = {
      search: (options) => {
        const { fail } = options;
        fail && fail({ message: '地图服务初始化失败' });
      },
      reverseGeocoder: (options) => {
        const { fail } = options;
        fail && fail({ message: '地图服务初始化失败' });
      }
    };
  }
};

// 组件挂载时执行
onMounted(() => {
  // 初始化地图上下文
  mapContext = uni.createMapContext('map');
  
  // 初始化腾讯地图SDK
  initQQMap();
  
  // 获取位置信息
  getLocation();
});
</script>

<style scoped>
.container {
  padding-bottom: 40px; /* 为底部导航栏留出空间 */
  background-color: #f8f8f8;
  min-height: 100vh;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 8px 15px;
  margin-right: 10px;
}

.search-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.search-input input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #333;
}

.actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.refresh-btn {
  padding: 5px;
}

.refresh-icon {
  width: 24px;
  height: 24px;
}

.list-mode-btn {
  padding: 5px 10px;
  background-color: #007aff;
  color: #fff;
  border-radius: 15px;
  font-size: 12px;
}

.map-container {
  position: relative;
  width: 100%;
  height: 500px;
}

.location-status {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 99;
}

.station-card {
  background-color: #fff;
  margin: 10px 15px;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.station-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.detail-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-text {
  font-size: 14px;
  color: #007aff;
}

.detail-icon {
  width: 16px;
  height: 16px;
}

.station-info {
  flex: 1;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.station-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.station-distance {
  font-size: 14px;
  color: #ff6b6b;
  background-color: #fff5f5;
  padding: 2px 8px;
  border-radius: 10px;
}

.station-location {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.station-meta {
  margin-bottom: 10px;
}

.meta-item {
  display: flex;
  margin-bottom: 5px;
}

.meta-label {
  font-size: 12px;
  color: #999;
  width: 70px;
}

.meta-value {
  font-size: 12px;
  color: #666;
  flex: 1;
}

.station-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}

.detail-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.right-icon {
  width: 16px;
  height: 16px;
}

.navigate-section {
  padding: 15px;
}

.navigate-btn {
  width: 100%;
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
}

.search-result-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.search-result-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.search-result-close {
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.search-result-content {
  max-height: 400px;
  overflow-y: auto;
}

.search-loading {
  padding: 40px 20px;
  text-align: center;
  color: #666;
}

.search-result-empty {
  padding: 40px 20px;
  text-align: center;
  color: #999;
}

.search-result-list {
  padding: 5px 0;
}

.search-result-item {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:active {
  background-color: #f8f8f8;
}

.search-result-item:last-child {
  border-bottom: none;
}

.station-info-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.station-name-distance {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.station-name-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.station-distance-text {
  font-size: 14px;
  color: #ff6b6b;
  background-color: #fff5f5;
  padding: 2px 8px;
  border-radius: 10px;
}

.station-address-text {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.station-extra-info {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: #999;
}

.station-open-time, .station-phone {
  display: flex;
  align-items: center;
}

/* 虚拟样式，用于缺失的图标 */
.station-open-time::before,
.station-phone::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-color: #ccc;
  border-radius: 3px;
  display: inline-block;
}

.station-phone::before {
  background-color: #999;
}
</style>